<template>
  <div class="text-center">
    <q-scroll-area style="height: 600px; max-width: 800px;">
      <div
        class="my-canvas-container"
        :style="{
            backgroundColor: store.canvas.backgroundColor,
            backgroundImage: `url(${store.canvas.backgroundImage})`
        }"
      >
        <template v-for="(component) in store.components" :key="component.sid">
          <div
            class="my-component-container"
            :style="{
              left: component.position.x + 'px',
              top: component.position.y + 'px',
              width: component.position.w + 'px',
              height: component.position.h + 'px',
              zIndex: component.shape.zIndex,
              transform: component.shape.transform? `rotate(${component.shape.transform}deg)`:'rotate(0deg)',
            }"
          >
            <component
              :is="parseView(component)"
              :detail="component"
            />

          </div>
        </template>
      </div>
    </q-scroll-area>
  </div>
</template>

<script lang="ts">

import { defineComponent, onMounted, onUnmounted } from 'vue';
import { parseViewName } from 'src/hook/common/useUitil';
import { editorEvent, CGraphEntity } from 'stores/editorModels';
import { useEditorStore } from 'stores/editorStore';
import { storeToRefs } from 'pinia';
import BaseComponent from 'components/views/BaseComponent.vue';
import { useRoute } from 'vue-router';
import { useEditorExecModPageComponent } from 'src/hook/editor/useEditorExecModPageComponent';

export default defineComponent({
  name: 'ViewIndex',
  extends: BaseComponent,
  components: {

  },
  setup (props, context) {
    //*********************************************************
    //          route
    //*********************************************************
    //router是全局路由对象，route是当前路由对象
    let curRoute = useRoute();

    //*********************************************************
    //          store
    //*********************************************************
    //store
    const store = useEditorStore();
    const {
      components,
      componentState
    } = storeToRefs(store);

    //*********************************************************
    // 实现拖拽生成组件、保存组件、删除组件、更新页面组件
    //*********************************************************
    const {
      getModuleCurrentPage
    } = useEditorExecModPageComponent();

    //*********************************************************
    //          动态组件解析
    //*********************************************************
    // 依据名称解析成vue组件
    const parseView = (com: CGraphEntity) => {
      return parseViewName(com);
    };

    //*********************************************************
    //          初始化
    //*********************************************************
    //初始化
    const init = () => {
      if ((curRoute.query.pageType) && (curRoute.query.pageId)) {
        let pageType = parseInt(curRoute.query.pageType as any);
        let id = parseInt(curRoute.query.pageId as any);
        if ((!isNaN(pageType)) && (!isNaN(id))) {
          store.setPage(pageType, id);
        }
      }

      //从数据库中加在组件
      getModuleCurrentPage();
    }

    //*********************************************************
    //          启动
    //*********************************************************
    //组件挂载
    onMounted(() => {
      init();
    });

    //组件卸载
    onUnmounted(() => {
      store.initCanvas();
      store.initComponents();
    })

    return {
      store,
      components,
      componentState,
      editorEvent,

      parseView
    };
  }
});

</script>

<style lang="scss" scoped>
.my-canvas-container {
  background-color: white;
  margin: 1px;
  padding: 2px;
  width: 100%;
  height: calc(100vh - 50px);
  position: relative;

  .my-component-container {
    position: absolute;
  }
}
</style>
